<template>

</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import DashboardLayout from '../../components/DashboardLayout.vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import axios from 'axios'
import * as echarts from 'echarts'

// 查询表单数据
const queryForm = reactive({
  dateRange: [],
  category: '',
  city: '',
  shopId: '',
  gender: '',
  ageRange: ''
})

// 下拉选项数据
const categories = ref([])
const cities = ref([])
const shops = ref([])
const genders = ref([])
const ageRanges = ref([])

// 核心指标数据
const metrics = ref([
  { label: 'Total sales', value: '¥685,000', trend: 12.5 },
  { label: 'Profit', value: '¥685,000', trend: 12.5 },
  { label: 'Number of orders', value: '685,000', trend: 12.5 },
  { label: 'Sales volume', value: '685,000', trend: 12.5 },
  { label: 'Number of customers', value: '685,000', trend: 12.5 }
])

// 图表配置
const charts = ref([
  {
    title: 'Total sales with profit',
    ref: 'salesChart',
    period: 'month'
  },
  {
    title: 'Number of orders',
    ref: 'ordersChart',
    period: 'month'
  },
  {
    title: 'Sales volume',
    ref: 'volumeChart',
    period: 'month'
  },
  {
    title: 'Number of customers',
    ref: 'customersChart',
    period: 'month'
  }
])

// 日期快捷选项
const dateShortcuts = [
  {
    text: 'Last 7 days',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: 'Last 30 days',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: 'Last 90 days',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]

// 获取趋势线渐变色
const getTrendLineGradient = (trend) => {
  const color = trend > 0 ? '#67C23A' : '#F56C6C'
  return `linear-gradient(90deg, ${color}20 0%, ${color} 100%)`
}

// 初始化图表
const initCharts = () => {
  // ... 图表初始化代码 ...
}

// 获取筛选项数据
const fetchOptions = async () => {
  try {
    const [categoriesRes, citiesRes, shopsRes, gendersRes, ageRangesRes] = await Promise.all([
      axios.get('/api/dashboard/categories'),
      axios.get('/api/dashboard/cities'),
      axios.get('/api/dashboard/shops'),
      axios.get('/api/dashboard/genders'),
      axios.get('/api/dashboard/age-ranges')
    ])

    categories.value = categoriesRes.data
    cities.value = citiesRes.data
    shops.value = shopsRes.data
    genders.value = gendersRes.data
    ageRanges.value = ageRangesRes.data
  } catch (error) {
    console.error('获取筛选项数据失败:', error)
  }
}

// 获取分析数据
const fetchData = async () => {
  try {
    const res = await axios.post('/api/dashboard/analysis', {
      startTime: queryForm.dateRange[0],
      endTime: queryForm.dateRange[1],
      category: queryForm.category,
      city: queryForm.city,
      shopId: queryForm.shopId,
      gender: queryForm.gender,
      ageRange: queryForm.ageRange
    })
    // 更新图表数据...
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

// 重置查询条件
const resetQuery = () => {
  queryForm.dateRange = []
  queryForm.category = ''
  queryForm.city = ''
  queryForm.shopId = ''
  queryForm.gender = ''
  queryForm.ageRange = ''
  fetchData()
}

onMounted(() => {
  fetchOptions()
  initCharts()
  fetchData()
})
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.page-header {
  margin-bottom: 24px;
}

.title-section h1 {
  font-size: 24px;
  font-weight: 600;
  color: #1f2f3d;
  margin: 0 0 8px 0;
}

.subtitle {
  font-size: 14px;
  color: #5e6d82;
  margin: 0;
  line-height: 1.5;
}

.filter-section {
  margin-bottom: 24px;
  border-radius: 8px;
}

.filter-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-form :deep(.el-form-item) {
  margin: 0;
}

.filter-actions {
  display: flex;
  gap: 12px;
}

.metrics-section {
  margin-bottom: 24px;
}

.metric-card {
  border-radius: 8px;
  height: 140px;
  transition: all 0.3s;
}

.metric-card:hover {
  transform: translateY(-5px);
}

.metric-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-label {
  font-size: 14px;
  color: #909399;
}

.metric-value {
  font-size: 24px;
  font-weight: 600;
  color: #1f2f3d;
  margin: 12px 0;
}

.metric-chart {
  height: 30px;
  display: flex;
  align-items: flex-end;
}

.trend-line {
  width: 100%;
  height: 6px;
  border-radius: 3px;
}

.charts-section {
  margin-bottom: 24px;
}

.chart-card {
  border-radius: 8px;
  height: 400px;
  transition: all 0.3s;
}

.chart-card:hover {
  transform: translateY(-5px);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2f3d;
}

.chart {
  height: 350px;
  width: 100%;
}

/* 响应式布局 */
@media screen and (max-width: 1400px) {
  .el-col {
    width: 100% !important;
  }

  .chart-card,
  .metric-card {
    margin-bottom: 20px;
  }
}

/* 暗色主题 */
:deep(.dark) {
  .dashboard-container {
    background-color: #1a1a1a;
  }

  .title-section h1 {
    color: #e5eaf3;
  }

  .subtitle {
    color: #a8abb2;
  }

  .metric-label {
    color: #a8abb2;
  }

  .metric-value {
    color: #e5eaf3;
  }

  .chart-title {
    color: #e5eaf3;
  }
}
</style>